<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>消息框里放进度条</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">研究用法</el-divider><!-- =============================================================== -->
	<p class="desc">测试一下...</p>
	<p class="desc"></p>
	<el-button type="primary" @click="upfile">消息框里放进度条</el-button>
	<el-dialog v-model="dialogVisible" :title="titleName" width="30%" :before-close="handleClose">
		<el-progress :percentage="schedule"></el-progress>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="warning" @click="dialogVisible = false">{{btnName}}</el-button>
			</span>
		</template>
	</el-dialog>
	
	
	
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		dialogVisible: false,
		schedule: 0,
		btnName: "停止上传",
		titleName: "文件上传中...",
	}
},
methods:{
	upfile(){
		this.dialogVisible = true;
		setInterval(()=>{
			if(this.schedule >= 100){
				this.btnName = "完成";
				this.titleName = "上传成功";
			}else{
				this.schedule += 1;
			}
		}, 80)
	},
	
	
},

}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>